<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title th:substituteby="index::title"></title>
<meta name="description" th:substituteby="index::metaDescription" />
<meta name="author" th:substituteby="index::metaAuthor" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<div th:include="index::config" />
<script th:src="@{/js/parishioner/createParishioner.js}"></script>
<script th:src="@{/js/parishioner/outcome.js}"></script>
<script th:src="@{/js/parishioner/updatePhoto.js}"></script>
</head>

<body>
	<header th:substituteby="index::header"> </header>
	<div id="container">
		<form class="clearfix" action="list.html" th:object="${parishioner}"
			th:action="@{/parishioners/create}" method="post" ng-model="person">

			<h1>Add new member</h1>

			<div id="errors" th:if="${#fields.hasErrors('person.*')}">
				<ul>
					<li th:text="#{parishioner_form.validation.errors}">Errors
						must be corrected before the form can be submitted</li>
				</ul>
			</div>

			<fieldset id="person-fields" th:fragment="person-details">
				<section id="photo-placehoder"></section>
				<section class="person-details">
					<!-- First name -->
					<label for="firstName"
						th:text="#{parishioner_form.label.firstName}"
						th:class="${#fields.hasErrors('person.firstName')}? 'labelError'">First
						Name: </label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.firstName')}"
						th:text="#{parishioner_form.validation.firstName}"></span> <input
						type="text" name="firstName" value="{{person.firstName}}" id="firstName"
						autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.firstName}"
						th:class="${#fields.hasErrors('person.firstName')}? 'fieldError'" />
					<!-- Last name -->
					<label for="lastName" th:text="#{parishioner_form.label.lastName}"
						th:class="${#fields.hasErrors('person.lastName')}? 'labelError'">Last
						Name: </label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.lastName')}"
						th:text="#{parishioner_form.validation.lastName}"></span> <input
						type="text" name="lastName" value="{{person.lastName}}" id="lastName"
						autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.lastName}"
						th:class="${#fields.hasErrors('person.lastName')}? 'fieldError'" />
					<!-- Birth Date -->
					<label for="birthDate"
						th:text="#{parishioner_form.label.birthDate}"
						th:class="${#fields.hasErrors('person.birthDate')}? 'labelError'">Marriage
						Date: </label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.birthDate')}"
						th:text="#{parishioner_form.validation.birthDate}"></span> <input
						type="text" name="birthDate" value="{{person.birthDate}}" id="birthDate"
						class="datePicker" autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.birthDate}"
						th:class="${#fields.hasErrors('person.birthDate')}? 'fieldError':'datePicker'" />
					<!-- Phone -->
					<label for="phone" th:text="#{parishioner_form.label.phone}"
						th:class="${#fields.hasErrors('person.phone')}? 'labelError'">Phone:</label>
					<span class="labelTextError"
						th:if="${#fields.hasErrors('person.phone')}"
						th:text="#{parishioner_form.validation.phone}"></span> <input
						type="tel" name="phone" value="{{person.phone}}" id="phone"
						th:placeholder="#{parishioner_form.placeholder.phone}"
						th:class="${#fields.hasErrors('person.phone')}? 'fieldError'" />
					<!-- Email -->
					<label for="email" th:text="#{parishioner_form.label.email}"
						th:class="${#fields.hasErrors('person.email')}? 'labelError'">Email:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.email')}"
						th:text="#{parishioner_form.validation.email}"></span> <input
						type="email" name="email" value="{{person.email}}" id="email"
						th:placeholder="#{parishioner_form.placeholder.email}"
						th:class="${#fields.hasErrors('person.email')}? 'fieldError'" />
					<!-- Workplace -->
					<label for="workplace"
						th:text="#{parishioner_form.label.workplace}"
						th:class="${#fields.hasErrors('person.workplace')}? 'labelError'">Workplace:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.workplace')}"
						th:text="#{parishioner_form.validation.workplace}"></span> <input
						type="text" name="workplace" value="{{person.workplace}}" id="workplace"
						autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.workplace}"
						th:class="${#fields.hasErrors('person.workplace')}? 'fieldError'" />
					<!-- Marriage Date -->
					<label for="marriageDate"
						th:text="#{parishioner_form.label.marriageDate}"
						th:class="${#fields.hasErrors('person.marriageDate')}? 'labelError'">Marriage
						Date: </label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.marriageDate')}"
						th:text="#{parishioner_form.validation.marriageDate}"></span> <input
						type="text" name="marriageDate" value="{{person.marriageDate}}" id="marriageDate"
						class="datePicker" autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.marriageDate}"
						th:class="${#fields.hasErrors('person.marriageDate')}? 'fieldError':'datePicker'" />
					<!-- Marital status -->
					<div class="styled-select" id="marital-status-select">
						<label for="maritalStatus"
							th:text="#{parishioner_form.label.maritalStatus}"
							th:class="${#fields.hasErrors('person.maritalStatus')}? 'labelError'">Marital
							Status: </label> <span class="labelTextError"
							th:if="${#fields.hasErrors('person.maritalStatus')}"
							th:text="#{parishioner_form.validation.maritalStatus}"></span> 
							<select ng-model="person.maritalStatus" 
							ng-options="maritalStatus for maritalStatus in maritalStatusList"></select>
					</div>
					<!-- Spouse religion -->
					<label for="spouseReligion"
						th:text="#{parishioner_form.label.spouseReligion}"
						th:class="${#fields.hasErrors('person.spouseReligion')}? 'labelError'">Spouse
						Religion: </label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.spouseReligion')}"
						th:text="#{parishioner_form.validation.spouseReligion}"></span> <input
						type="text" name="spouseReligion" value="{{person.spouseReligion}}" id="spouseReligion"
						autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.spouseReligion}"
						th:class="${#fields.hasErrors('person.spouseReligion')}? 'fieldError'" />

				</section>
				<section class="person-details">
					<!-- Photo -->
					<label for="photo" th:text="#{parishioner_form.label.photo}"
						th:class="${#fields.hasErrors('person.photo')}? 'labelError'">Photo:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.photo')}"
						th:text="#{parishioner_form.validation.photo}"></span> <input
						type="file" name="photo" value="" id="photo"
						th:class="${#fields.hasErrors('person.photo')}? 'fieldError'" />

					<!-- Studies -->
					<label for="studies" th:text="#{parishioner_form.label.studies}"
						th:class="${#fields.hasErrors('person.studies')}? 'labelError'">Studies:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.studies')}"
						th:text="#{parishioner_form.validation.studies}"></span>
					<div class="styled-select">
						<select ng-model="person.studies" ng-options="study for study in studiesList"></select>
					</div>
					<!-- Company -->
					<label for="company" th:text="#{parishioner_form.label.company}"
						th:class="${#fields.hasErrors('person.company')}? 'labelError'">Company:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.company')}"
						th:text="#{parishioner_form.validation.company}"></span> <input
						type="text" name="company" value="{{person.company}}" id="company"
						autofocus="autofocus"
						th:placeholder="#{parishioner_form.placeholder.company}"
						th:class="${#fields.hasErrors('person.company')}? 'fieldError'" />
					<!-- Job -->
					<label for="job" th:text="#{parishioner_form.label.job}"
						th:class="${#fields.hasErrors('person.job')}? 'labelError'">Job:
					</label> <span class="labelTextError"
						th:if="${#fields.hasErrors('person.job')}"
						th:text="#{parishioner_form.validation.job}"></span> <input
						type="text" name="job" value="{{person.job}}" id="job" placeholder="Programmer"
						autofocus="autofocus" 
						th:placeholder="#{parishioner_form.placeholder.job}"
						th:class="${#fields.hasErrors('person.job')}? 'fieldError'" />

					<!-- input type="file" id="file" name="file" th:field="*{person.image}">
					</input>-->
					<section id="parishioner-details">
						<!-- Baptist -->
						<div class="styled-select" id="baptist-select">
							<label for="baptist"
								th:text="#{parishioner_form.label.baptist}"
								th:class="${#fields.hasErrors('baptist')}? 'labelError'">Baptist: </label> <span class="labelTextError"
								th:if="${#fields.hasErrors('baptist')}"
								th:text="#{parishioner_form.validation.baptist}"></span> 
								<select ng-model="person.baptist" 
								ng-options="person for person in personsNamesList"
								class="persons-names-option">
								</select>
						</div>
						
						<!-- Baptism Date -->
						<label for="baptismDate"
							th:text="#{parishioner_form.label.baptismDate}"
							th:class="${#fields.hasErrors('baptismDate')}? 'labelError'">Baptism
							Date: </label> <span class="labelTextError"
							th:if="${#fields.hasErrors('baptismDate')}"
							th:text="#{parishioner_form.validation.baptismDate}"></span> <input
							type="text" class="datePicker"
							onclick="$(this).datepicker().datepicker('show')"
							name="baptismDate" value="{{baptismDate}}" id="baptismDate"
							autofocus="autofocus"
							th:placeholder="#{parishioner_form.placeholder.baptismDate}"
							th:class="${#fields.hasErrors('baptismDate')}? 'fieldError':'datePicker'" />

						<!-- Holy Spirit Baptism -->
						<label for="holySpiritBaptism"
							th:text="#{parishioner_form.label.holySpiritBaptism}"
							th:class="${#fields.hasErrors('holySpiritBaptism')}? 'labelError'"></label> <span class="labelTextError"
							th:if="${#fields.hasErrors('holySpiritBaptism')}"
							th:text="#{parishioner_form.validation.holySpiritBaptism}"></span>
						<input type="text" class="datePicker" name="holySpiritBaptism"
							value="{{holySpiritBaptism}}" id="holySpiritBaptism" 
							onclick="$(this).datepicker().datepicker('show')"
							autofocus="autofocus" 
							th:placeholder="#{parishioner_form.placeholder.holySpiritBaptism}"
							th:class="${#fields.hasErrors('holySpiritBaptism')}? 'fieldError':'datePicker'" />
					</section>
					<section class="person-address" th:fragment="person-address">
						<label for="address" th:text="#{parishioner_form.label.address}"
							th:class="${#fields.hasErrors('person.address')}? 'labelError'">Your
							address: </label> <span class="labelTextError"
							th:if="${#fields.hasErrors('person.address')}"
							th:text="#{parishioner_form.validation.address}"></span>
						<textarea name="address" rows="0" cols="0" id="address"
							value="{{person.address}}"
							th:placeholder="#{parishioner_form.placeholder.address}"
							th:class="${#fields.hasErrors('person.address')}? 'fieldError'"></textarea>
					</section>
				</section>
			</fieldset>

			<a class="button" id="create-button">Add</a> <a class="button"
				id="cancel-button">Cancel</a>
		</form>
	</div>
	<!-- end of #container -->
	<footer th:substituteby="index::footer"></footer>

</body>
</html>
